<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 获取路由对象
const router = useRouter()
// 输入框
const inp =  ref('')

// 搜索按钮跳转到搜索页
const toSearch = ()=>{
if(inp.value == ''){
  alert('你输入的为空')
  return
}

  // 三种方式路由跳转
// 1. 直接写地址
// router.push('/search')

// 2. 如果地址较长 可以考虑用 name 的属性
// router.push({
// name 和 路由的 name 的属性匹配
//   name:'search',
// 适合只有一个参数的时候使用
// params中的key 和注册的参数名必须保持一致
// params:{
//   words:inp.value
// }
// })

// 3. 传入对象 分别设置不同的值
router.push({
  path:'/search',
// 传值是个不确定参数个数的时候使用
  query:{
    inp:inp.value,
    age:18,
    name:'jack'
  }
})

}
</script>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inp" type="text">
      <button @click="toSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <!-- 跳转参数传值 在URL后面传值(键值对形式) -->
      <!-- <router-link to="/search?query=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?query=前端培训">前端培训</router-link>
      <router-link to="/search?query=如何成为前端大牛">如何成为前端大牛</router-link> -->
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<style scoped>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>
